import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Space, Table } from 'antd';
import { PlusOutlined, PoweroffOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import type { TableProps } from 'antd';

// 创建样式化组件
const Container = styled.div`
  /* background-color: #1976d2; */
  .自定义居中 {
    background-color: red;
  }
`;
interface DataType {
  key: string;
  createDate: string;
  title: number;
  surveyCount: string;
  updateDate: string;
}
interface PageProps {}
const Page: React.FC<PageProps> = () => {
  const tableData = useState<any[]>([]);
  const navigate = useNavigate();
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '创建日期',
      dataIndex: 'createDate',
      key: 'createDate',
      width: 180,
      render: text => <a>{text}</a>
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '题目数',
      dataIndex: 'surveyCount',
      key: 'surveyCount',
      width: 150
    },
    {
      title: '更新日期',
      dataIndex: 'updateDate',
      key: 'updateDate',
      width: 180,
      render: text => <a>{text}</a>
    },
    {
      title: '操作',
      key: 'action',
      width: 180,
      render: (_, record) => (
        <Space size="middle">
          <a>查看问卷</a>
          <a>删除</a>
        </Space>
      )
    }
  ];
  function getData() {
    // getAllSurvey().then((res) => {
    //   console.log(res)
    //   tableData.value = res
    // })
  }
  getData();

  const goViewSurvey = info => {
    navigate(`/preview/${info.id}`, {
      state: { from: 'home' }
    });
  };
  const goToEditor = () => {
    localStorage.setItem('activeView', 'editor');
    navigate('/editor/survey-type');
  };
  const goToMetar = () => {
    localStorage.setItem('activeView', 'materials');
    navigate('/materials/select-group/single-select');
  };
  return (
    <Container className="p-4 border-box">
      <div className="自定义居中">自定义居中元素</div>
      <h1 className="font-weight-100 text-center m-b-10">问卷</h1>
      <div className="mb-4">
        <Space className="m-b-4">
          <Button type="primary" icon={<PlusOutlined />} onClick={goToEditor}>
            创建问卷
          </Button>
          <Button color="danger" icon={<PoweroffOutlined />} onClick={goToMetar}>
            组件市场
          </Button>
        </Space>
        <Table<DataType> columns={columns} dataSource={tableData} />
      </div>
    </Container>
  );
};

export default Page;
